<template>
  <div class="dt-content-progress-right">
    <div class="dt-content-progress-right-in">
      <div class="dt-content-progress-right-tab">
        <el-tabs v-model="activeName">
          <el-tab-pane label="审批记录" name="0" v-if="query.auditType == '2'">
            <el-timeline v-if="appovalRecord.auditList && appovalRecord.auditList.length > 0">
              <el-timeline-item v-for="(item, index) in appovalRecord.auditList" :key="index" :type="timelineType.progressTypeArr[index]">
                <!-- 使用默认插槽来自定义整个时间线条目 -->
                <template v-slot:default>
                  <div class="dt-content-progress-right-approval-title" v-if="item.logState == 1">
                    <p>提交进度</p>
                    <p>
                      {{ item.createName }} <em>提交于 {{ item.createTime }}</em>
                    </p>
                  </div>
                  <div class="dt-content-progress-right-approval-title" v-else>
                    <p>{{ item.logState == 2 ? '审核通过' : '审核拒绝' }}，当前进度：{{ item.auditProgressAfter }}%</p>
                    <p>
                      {{ item.createName }} <em>提交于 {{ item.createTime }}</em>
                    </p>
                  </div>
                  <el-card shadow="never" v-if="item.logState == 1" class="dt-content-progress-right-approval-card">
                    <p>当前进度：{{ item.auditProgressBefore }}%</p>
                    <p style="margin-top: 8px">提交进度：{{ item.submitProgress }}%</p>
                  </el-card>
                </template>
              </el-timeline-item>
            </el-timeline>
            <div v-else>
              <p style="color: rgb(144, 147, 153); margin-top: 16px; text-align: center">暂无数据</p>
            </div>
          </el-tab-pane>
          <el-tab-pane label="校对记录" name="0" v-if="query.auditType == '1'">
            <el-timeline v-if="appovalRecord.jdList && appovalRecord.jdList.length > 0">
              <el-timeline-item v-for="(item, index) in appovalRecord.jdList" :key="item.submitTime" :type="timelineType.jdTypeArr[index]">
                <template v-slot:default>
                  <div class="dt-content-progress-right-approval-title" v-if="item.logState == 1">
                    <p>第{{ item.auditIndex }}次发起校对</p>
                    <p>
                      {{ item.submitName }} <em>提交于 {{ item.submitTime }}</em>
                    </p>
                  </div>
                  <div class="dt-content-progress-right-approval-title" v-else>
                    <p>第{{ item.auditIndex }}次发起校对{{ item.logState == 2 ? '通过' : '驳回' }}</p>
                    <p>
                      {{ item.submitName }} <em>提交于 {{ item.submitTime }}</em>
                    </p>
                  </div>
                  <el-card shadow="never" class="dt-content-progress-right-approval-card-item">
                    <div class="dt-content-progress-right-approval-file" v-if="item.logState == 1 && item.delayReason">
                      <div class="dt-content-progress-right-approval-delayReason">延期原因：</div>
                      <div>
                        <p>{{ item.delayReason }}</p>
                      </div>
                    </div>
                    <div class="dt-content-progress-right-approval-file">
                      <div v-if="item.logState == 1">任务成果：</div>
                      <div v-if="item.logState == 1">
                        <p v-for="itemFile in item.taskResult" :key="itemFile.id">
                          <i class="el-icon-document"></i><span>{{ itemFile.fileName }}</span
                          ><span style="margin-left: 20px"><el-button type="text" @click="downLoad(itemFile)">下载</el-button></span>
                        </p>
                      </div>
                      <div v-if="item.logState != 1">审批附件：</div>
                      <div v-if="item.logState != 1 && item.auditFile.length > 0">
                        <p v-for="itemFile in item.auditFile" :key="itemFile.id">
                          <i class="el-icon-document"></i><span>{{ itemFile.fileName }}</span>
                          <!-- <span style="margin-left: 20px;">
                            <el-button type="text" @click="downLoad(itemFile)">预览</el-button>
                          </span> -->
                          <span style="margin-left: 20px"><el-button type="text" @click="downLoad(itemFile)">下载</el-button></span>
                        </p>
                      </div>
                      <div v-if="item.logState != 1 && item.auditFile.length == 0">
                        <p>--</p>
                      </div>
                    </div>
                    <div class="dt-content-progress-right-approval-file" v-if="item.logState != 1">
                      <div class="dt-content-progress-right-approval-delayReason">审核意见：</div>
                      <div>
                        <p>{{ item.remark || '--' }}</p>
                      </div>
                    </div>
                  </el-card>
                </template>
              </el-timeline-item>
            </el-timeline>
            <div v-else>
              <p style="color: rgb(144, 147, 153); margin-top: 16px; text-align: center">暂无数据</p>
            </div>
          </el-tab-pane>
          <el-tab-pane label="审核记录" name="1" v-if="query.auditType == '1'">
            <el-timeline v-if="appovalRecord.shList && appovalRecord.shList.length > 0">
              <el-timeline-item v-for="(item, index) in appovalRecord.shList" :key="item.submitTime" :type="timelineType.shTypeArr[index]">
                <template v-slot:default>
                  <div class="dt-content-progress-right-approval-title" v-if="item.logState == 1">
                    <p>第{{ item.auditIndex }}次发起审核</p>
                    <p>
                      {{ item.submitName }} <em>提交于 {{ item.submitTime }}</em>
                    </p>
                  </div>
                  <div class="dt-content-progress-right-approval-title" v-else>
                    <p>第{{ item.auditIndex }}次发起审核{{ item.logState == 2 ? '通过' : '驳回' }}</p>
                    <p>
                      {{ item.submitName }} <em>提交于 {{ item.submitTime }}</em>
                    </p>
                  </div>
                  <el-card shadow="never" class="dt-content-progress-right-approval-card-item">
                    <div class="dt-content-progress-right-approval-file" v-if="item.logState == 1 && item.delayReason">
                      <div>延期原因：</div>
                      <div>
                        <p>{{ item.delayReason }}</p>
                      </div>
                    </div>
                    <div class="dt-content-progress-right-approval-file">
                      <div v-if="item.logState == 1">任务成果：</div>
                      <div v-if="item.logState == 1">
                        <p v-for="itemFile in item.taskResult" :key="itemFile.id">
                          <i class="el-icon-document"></i><span>{{ itemFile.fileName }}</span
                          ><span style="margin-left: 20px"><el-button type="text" @click="downLoad(itemFile)">下载</el-button></span>
                        </p>
                      </div>
                      <div v-if="item.logState != 1">审批附件：</div>
                      <div v-if="item.logState != 1 && item.auditFile.length > 0">
                        <p v-for="itemFile in item.auditFile" :key="itemFile.id">
                          <i class="el-icon-document"></i><span>{{ itemFile.fileName }}</span>
                          <!-- <span style="margin-left: 20px;">
                            <el-button type="text" @click="downLoad(itemFile)">预览</el-button>
                          </span> -->
                          <span style="margin-left: 20px"><el-button type="text" @click="downLoad(itemFile)">下载</el-button></span>
                        </p>
                      </div>
                      <div v-if="item.logState != 1 && item.auditFile.length == 0">
                        <p>--</p>
                      </div>
                    </div>
                    <div class="dt-content-progress-right-approval-file" v-if="item.logState != 1">
                      <div>审核意见：</div>
                      <div>
                        <p>{{ item.remark || '--' }}</p>
                      </div>
                    </div>
                  </el-card>
                </template>
              </el-timeline-item>
            </el-timeline>
            <div v-else>
              <p style="color: rgb(144, 147, 153); margin-top: 16px; text-align: center">暂无数据</p>
            </div>
          </el-tab-pane>
          <el-tab-pane label="审定记录" name="2" v-if="query.auditType == '1'">
            <el-timeline v-if="appovalRecord.sdList && appovalRecord.sdList.length > 0">
              <el-timeline-item v-for="(item, index) in appovalRecord.sdList" :key="item.submitTime" :type="timelineType.sdTypeArr[index]">
                <template v-slot:default>
                  <div class="dt-content-progress-right-approval-title" v-if="item.logState == 1">
                    <p>第{{ item.auditIndex }}次发起审定</p>
                    <p>
                      {{ item.submitName }} <em>提交于 {{ item.submitTime }}</em>
                    </p>
                  </div>
                  <div class="dt-content-progress-right-approval-title" v-else>
                    <p>第{{ item.auditIndex }}次发起审定{{ item.logState == 2 ? '通过' : '驳回' }}</p>
                    <p>
                      {{ item.submitName }} <em>提交于 {{ item.submitTime }}</em>
                    </p>
                  </div>
                  <el-card shadow="never" class="dt-content-progress-right-approval-card-item">
                    <div class="dt-content-progress-right-approval-file" v-if="item.logState == 1 && item.delayReason">
                      <div>延期原因：</div>
                      <div>
                        <p>{{ item.delayReason }}</p>
                      </div>
                    </div>
                    <div class="dt-content-progress-right-approval-file">
                      <div v-if="item.logState == 1">任务成果：</div>
                      <div v-if="item.logState == 1">
                        <p v-for="itemFile in item.taskResult" :key="itemFile.id">
                          <i class="el-icon-document"></i><span>{{ itemFile.fileName }}</span
                          ><span style="margin-left: 20px"><el-button type="text" @click="downLoad(itemFile)">下载</el-button></span>
                        </p>
                      </div>
                      <div v-if="item.logState != 1">审批附件：</div>
                      <div v-if="item.logState != 1 && item.auditFile.length > 0">
                        <p v-for="itemFile in item.auditFile" :key="itemFile.id">
                          <i class="el-icon-document"></i><span>{{ itemFile.fileName }}</span>
                          <!-- <span style="margin-left: 20px;">
                            <el-button type="text" @click="downLoad(itemFile)">预览</el-button>
                          </span> -->
                          <span style="margin-left: 20px"><el-button type="text" @click="downLoad(itemFile)">下载</el-button></span>
                        </p>
                      </div>
                      <div v-if="item.logState != 1 && item.auditFile.length == 0">
                        <p>--</p>
                      </div>
                    </div>
                    <div class="dt-content-progress-right-approval-file" v-if="item.logState != 1">
                      <div>审核意见：</div>
                      <div>
                        <p>{{ item.remark || '--' }}</p>
                      </div>
                    </div>
                  </el-card>
                </template>
              </el-timeline-item>
            </el-timeline>
            <div v-else>
              <p style="color: rgb(144, 147, 153); margin-top: 16px; text-align: center">暂无数据</p>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    appovalRecord: Object // 指定prop为Object类型
  },
  watch: {
    appovalRecord(newVal) {
      if (newVal && newVal.currentType == 1) {
        this.activeName = '0'
      } else if (newVal && newVal.currentType == 2) {
        this.activeName = '1'
      } else if (newVal && newVal.currentType == 3) {
        this.activeName = '2'
      }
    }
  },
  data() {
    return {
      activeName: '0'
    }
  },
  computed: {
    // 使用计算属性来返回带有 tooltip 的项目列表
    timelineType() {
      var Type = {}
      if (this.appovalRecord.auditList && this.appovalRecord.auditList.length) {
        Type.progressTypeArr = []
        this.appovalRecord.auditList.forEach((item) => {
          if (item.logState == '1') {
            Type.progressTypeArr.push('info')
          } else if (item.logState == '2') {
            Type.progressTypeArr.push('success')
          } else if (item.logState == '3') {
            Type.progressTypeArr.push('danger ')
          } else {
            Type.progressTypeArr.push('primary')
          }
        })
      }
      if (this.appovalRecord.jdList && this.appovalRecord.jdList.length) {
        Type.jdTypeArr = []
        this.appovalRecord.jdList.forEach((item) => {
          if (item.logState == '1') {
            Type.jdTypeArr.push('info')
          } else if (item.logState == '2') {
            Type.jdTypeArr.push('success')
          } else if (item.logState == '3') {
            Type.jdTypeArr.push('danger')
          } else {
            Type.jdTypeArr.push('info')
          }
        })
      }
      if (this.appovalRecord.shList && this.appovalRecord.shList.length) {
        Type.shTypeArr = []
        this.appovalRecord.shList.forEach((item) => {
          if (item.logState == '1') {
            Type.shTypeArr.push('info')
          } else if (item.logState == '2') {
            Type.shTypeArr.push('success')
          } else if (item.logState == '3') {
            Type.shTypeArr.push('danger')
          } else {
            Type.shTypeArr.push('info')
          }
        })
      }
      if (this.appovalRecord.sdList && this.appovalRecord.sdList.length) {
        Type.sdTypeArr = []
        this.appovalRecord.sdList.forEach((item) => {
          if (item.logState == '1') {
            Type.sdTypeArr.push('info')
          } else if (item.logState == '2') {
            Type.sdTypeArr.push('success')
          } else if (item.logState == '3') {
            Type.sdTypeArr.push('danger')
          } else {
            Type.sdTypeArr.push('info')
          }
        })
      }
      return Type
    },
    query() {
      return this.$tools.getQuery(this)
    }
    // activeName() {
    //   // if (this.appovalRecord.currentType == 1) {
    //   //   return '0'
    //   // } else if (this.appovalRecord.currentType == 2) {
    //   //   return '1'
    //   // } else if (this.appovalRecord.currentType == 3) {
    //   //   return '2'
    //   // } else {
    //   //   return '0'
    //   // }
    // }
  },
  methods: {
    downLoad(item) {
      var URL = this.$tools.getStsFileUrl(this.$store.state.uid, item.fileUrl || item.url)
      this.downloadFile(URL, item.fileName)
    },
    downloadFile(url, filename, mimeType) {
      // 如果是URL，直接创建a标签下载
      // 检查是否为同源URL
      if (new URL(url).origin !== window.location.origin) {
        // 对于非同源URL，使用window.open在新标签页中打开链接
        window.open(url, '_blank')
      } else {
        // 对于同源URL，可以创建一个临时的<a>元素并模拟点击
        const a = document.createElement('a')
        a.href = url
        a.download = filename
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
      }
    }
    // setActiveName() {
    //   console.log(this.activeNameCpu)
    //   if (this.activeNameCpu == '0') {
    //     this.activeName = '0'
    //   } else if (this.activeNameCpu == '1') {
    //     this.activeName = '1'
    //   } else if (this.activeNameCpu == '2') {
    //     this.activeName = '2'
    //   } else {
    //     this.activeName = '0'
    //   }
    // }
  },
  mounted() {}
}
</script>
<style scoped>
.dt-content-progress-right {
  background-color: #fff;
  width: 34%;
  overflow: auto;
}
.dt-content-progress-right-in {
  padding: 20px;
}
.dt-content-progress-right-approval {
  margin-top: 6px;
}
.dt-content-progress-right-approval-file {
  display: flex;
  justify-content: start;
  font-size: 12px;
  align-items: center;
  margin-bottom: 8px;
}
.dt-content-progress-right-approval-card-item >>> .el-card__body > div:last-of-type {
  margin-bottom: 0;
}
.dt-content-progress-right-approval-file > div:nth-of-type(1) {
  width: 70px;
  align-self: flex-start;
  line-height: 18px;
  flex-shrink: 0;
}
.dt-content-progress-right-approval-delayReason {
  align-self: flex-start;
}
.dt-content-progress-right-approval-file > div:nth-of-type(2) {
  flex: 1;
  overflow: hidden;
}
.dt-content-progress-right-approval-file > div:nth-of-type(2) > p {
  line-height: 18px;
  font-size: 12px;
  align-self: center;
  margin-bottom: 4px;
  display: flex;
  align-items: center; /* 垂直居中对齐所有子元素 */
  overflow: hidden; /* 隐藏超出部分 */
}
.dt-content-progress-right-approval-file > div:nth-of-type(2) > p >>> .el-icon-document {
  padding-top: 1.5px;
}
.dt-content-progress-right-approval-file > div:nth-of-type(2) > p:last-of-type {
  margin-bottom: 0;
}
.dt-content-progress-right-approval-file > div:nth-of-type(2) > p >>> .el-button {
  padding: 0;
  font-size: 12px;
  margin-left: auto; /* 将按钮推到最右边 */
}
.dt-content-progress-right-approval-file > div:nth-of-type(2) > p > span:nth-of-type(1) {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
  flex-grow: 1; /* 让span元素填充剩余空间 */
  margin-left: 4px; /* 调整与其他元素的距离 */
}
.dt-content-progress-right-approval-card >>> .el-card__body p {
  line-height: 18px;
}
.dt-content-progress-right-approval-card >>> .el-card__body p:nth-of-type(2) {
  margin-bottom: 0;
}
</style>
